<template>
  <div>
    <template
      v-if="(item.show && !item.children && !item.changeMap) ||
      (item.show && item.hideChildren && !item.changeMap) ||
      (item.show && !item.children && Array.isArray(item.changeMap) && item.changeMap.includes(changeMap)) ||
      (item.show && item.hideChildren && Array.isArray(item.changeMap) && item.changeMap.includes(changeMap))"
    >
      <router-link :to="item.index" tag="div">
        <el-menu-item :index="item.index">
          <i :class="item.iconClass"></i>
          <span slot="title">{{ item.meta.title }}</span>
        </el-menu-item>
      </router-link>
    </template>

    <el-submenu
      v-else-if="(item.show && item.children && !item.changeMap) ||
      (item.show && item.children && Array.isArray(item.changeMap) && item.changeMap.includes(changeMap))"
      ref="subMenu"
      :index="item.index"
      popper-append-to-body
    >
      <template slot="title">
        <i :class="item.iconClass"></i>
        <span slot="title">{{ item.meta.title }}</span>
      </template>
      <MenuItem
        v-for="child in item.children"
        :key="child.index"
        :item="child"
      />
    </el-submenu>
  </div>
</template>

<script>
export default {
  name: "MenuItem",
  props: {
    item: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  computed: {
    // 在beforeEach里面存取到localStorage，在这里取出，得到当前登录用户权限值
    auth() {
      return localStorage.getItem("username");
    },
    changeMap(){
      return window.changeMap
    }
  }
};
</script>

<style>
* {
  box-sizing: border-box;
}
.el-menu--collapse .el-submenu__title span {
  height: 0;
  width: 0;
  overflow: hidden;
  visibility: hidden;
  display: inline-block;
}
.el-menu--collapse .el-submenu__icon-arrow {
  display: none;
}
</style>
